<template>
    <van-swipe class="swipe-container" indicator-color="white" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in banners" :key="index">
        <img :src="image" alt="轮播图" class="swipe-image" />
      </van-swipe-item>
      <template #indicator>
        <van-pagination :total="banners.length" :page-size="1" color="#fff" />
      </template>
    </van-swipe>

    <van-row class="icon-row">
    <van-col v-for="(icon, index) in icons" :key="index" :span="4" class="icon-col">
      <van-icon color="#000" :name="icon?.icon||'service'" size="32"  />
      <div class="icon-text">{{ icon.text }}</div>
    </van-col>
  </van-row>

    <van-row class="function-buttons">
      <van-grid class="function-grid" column-num="4" gutter="10px">
        <van-grid-item
          v-for="(item, index) in functionItems"
          :key="index"
          :icon="item.icon"
          :text="item.text"
          @click="handleFunctionClick(item.text)"
        >
          <template #icon>
            <van-icon :name="item.icon" size="24px" :color="item.color" :style="{ backgroundColor: item.backgroundColor || 'transparent'}"/>
          </template>
        </van-grid-item>
      </van-grid>
    </van-row>
    
  
    <van-row class="hot-recommend">
        <van-col span="24" class="mb-4">
          <h3 class="section-title">热门类型</h3>
        </van-col>
        <div class="hot-items">
          <div
              v-for="(item, index) in hotItems"
              :key="index"
              class="hot-item"
          >
            <van-image
                width="300px"
                height="200px"
                :src="item.image"
                alt="热门图片"
                class="hot-image" 
            />
            <div class="hot-text">{{ item.text }}</div>
          </div>
        </div>
      </van-row>
  
    <div class="popular-routes">
      <h2>人气路线</h2>
      <van-row>
        <van-col
          v-for="(route, index) in popularRoutes"
          :key="index"
          :span="24"
          class="popular-route-col"
        >
          <img :src="route.image" alt="人气路线" class="popular-route-image" />
          <div class="popular-route-text">{{ route.text }}</div>
          <div class="popular-route-price">¥{{ route.price }}起</div>
          <van-button type="primary" size="small" class="book-button">立即预定</van-button>
        </van-col>
      </van-row>
    </div>
  
<dibudaohang></dibudaohang>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import dibudaohang from './dibudaohang.vue';
  
  const banners = ref([
    'https://cdn8.axureshop.com/demo2024/1628102/images/%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u1111.svg',
    'https://cdn8.axureshop.com/demo2024/1628102/images/%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u1111.svg',
  ]);
  
  const icons = ref([
    { icon: '/public/guonei01.png', text: '国内' },
    { icon: '/public/rihan.png', text: '日韩' },
    { icon: '/public/a-1_oumei1.png', text: '欧美' },
    { icon: '/public/feizhou.png', text: '非洲' },
    { icon: '/public/gengduo.png', text: '全部' },
  ]);
  
  const hotItems = ref([
  
    { text: '亲子度假', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u172.png' },
  
    { text: '情侣休闲', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u175.png' },
  
    { text: '团队定制', image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E9%A6%96%E9%A1%B5/u179.png' },
  
  ]);
  
  const popularRoutes = ref([
    {
      image: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u1111.svg',
      text: '广西销冠+桂林+阳朔+龙脊+双层游轮',
      price: 1238,
    },
  ]);
  
  const activeTab = ref('/home');
  </script>
  
  <style scoped>
  .swipe-container {
    height: 200px;
  }
  
  .swipe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hot-items {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: -10px;
  padding: 10px;
}



.hot-item {

  width: 300px;

  flex: 0 0 auto;

  margin: 10px;

  border-radius: 8px;

  overflow: hidden;

}



.hot-image {

  border-radius: 8px;

}



.hot-text {

  text-align: center;

  padding: 8px;

  font-size: 14px;

  color: #333;

}
  
  .popular-routes {
    margin: 10px 0;
  }
  
  .popular-route-col {
    text-align: center;
    padding: 10px 0;
  }
  
  .popular-route-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .popular-route-text {
    margin-top: 5px;
    font-size: 16px;
    color: #333;
  }
  
  .popular-route-price {
    margin-top: 5px;
    font-size: 14px;
    color: red;
  }
  
  .book-button {
    margin-top: 10px;
  }
  </style>